<template>
  <!--数据统计-->
  <div class="base-container overviewManagement">
    <el-row gutter="10">
      <el-col :span="4">
        <!--项目查询 分享能耗    -->
        <TreeMenu ref="communityTree" @handleNodeClick="handleNodeClick" @selTreeList="handleNodeClick"/>
      </el-col>
      <el-col :span="20">
        <div class="MessagePanel">
          <div class="dataShowView">
            <div class="timeSharing">
              <span
                  style="margin-right: 10px;margin-top:5px;float: left;color: #e0e9f2;font-size: 11px;">时间区间：</span>
              <el-date-picker class="elDataPicker"
                              v-model="dateData"
                              type="datetimerange" range-separator="至" start-placeholder="开始时间"
                              end-placeholder="结束时间"/>
              <el-select v-model="type" class="selectView selectViewIcon" size="large">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"/>
              </el-select>
              <el-select v-model="packetType" multiple collapse-tags class="selectView" placeholder="全部分组">
                <el-option
                    v-for="item in packetTypeOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
              <el-button type="success">查询</el-button>
              <el-button type="success">导出</el-button>

              <span style="margin-right: 10px;margin-top:5px;color: #e0e9f2;font-size: 11px;">游标时间：</span>
              <el-date-picker v-model="vernierDate"
                              type="datetime"/>
              <el-button type="success">手动计算分时分段</el-button>
            </div>
            <time-sharing-table ref="time_sharing_table" @getData="queryAction"/>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>

</template>

<script>
import TreeMenu from '../../components/CommunityTree.vue';
import TimeSharingTable from "@/views/charging/components/TimeSharingTable.vue";
import moment from "moment/moment";

let component;
export default {
  name: "StatisticsManagement",
  components: {TimeSharingTable, TreeMenu},
  data() {
    return {
      dateData: [moment(), moment()],
      vernierDate:moment(),
      packetType: "1",
      packetTypeOption: [{
        label: '尖',
        value: '1'
      }, {
        label: '峰',
        value: '2'
      }, {
        label: '平',
        value: '3'
      }, {
        label: '谷',
        value: '4'
      }],
      type: "1",
      options: [{
        label: '电量',
        value: '1'
      }, {
        label: '水量',
        value: '2'
      }, {
        label: '热量',
        value: '3'
      }, {
        label: '冷量',
        value: '4'
      }, {
        label: '当量时间',
        value: '5'
      }]
    }
  },
  methods: {
    async handleNodeClick(val) {
      let queryIds = [];
      queryIds.push(val.rangeId)
      let childrenIds = await component.getChildrenId(val.children);
      queryIds = queryIds.concat(childrenIds);
      //设置区域id
      component.setSelRanges(queryIds, val.rangeId);
    },
    async getChildrenId(list) {
      let childrenIds = [];
      for (let range of list) {
        childrenIds.push(range.rangeId);
        if (range.children && range.children.length > 0) {
          let rangeChildrenIds = await component.getChildrenId(range.children);
          childrenIds = childrenIds.concat(rangeChildrenIds);
        }
      }
      return childrenIds;
    },
    setSelRanges(queryIds, rangeId) {
      component.rangeIds = queryIds;
      component.rangeId = rangeId;
      component.queryAction();
    },
    queryAction() {
      //查询数据赋值；
      component.$refs.time_sharing_table.queryData();
    }
  },
  mounted() {
    component = this;
    component.$refs.communityTree.selTreeList({actionType: "deviceTreeBySelf", route: "device"});
  }
}
</script>

<style lang="scss" scoped>

.el-input__suffix-inner {
  padding: 0px 0px;
}

.el-select .el-input__inner {
  margin-left: 0px;
}

.timeSharing {
  margin: 30px 0px 8px 0px;
}

.dataShowView {
  width: 100%;
  height: 750px;
  overflow: hidden;
}
</style>